<template>
  <div class="login">
    <div class="circle-container" @click="handleClick">
      <div 
        class="circle" 
        v-for="n in 5" 
        :key="n" 
        :style="getCircleStyle(n)" 
        :class="`circle-${n}`"
      ></div>
      <div class="center-text">点击进入</div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$router.push({
        name: "FramePalm"
      });
    },
    getCircleStyle(n) {
      const scale = 0.7 + 0.2 * n; // 圆圈的大小变化（增大间距）
      const animationDuration = 2 + 0.5 * n; // 动画时长
      return {
        animation: `expand ${animationDuration}s ease-out infinite`,
        transform: `scale(${scale})`,
      };
    },
  },
};
</script>

<style scoped>
/* 确保父容器允许 .login 占据全部可用空间 */
.login {
  background-image: url('@/assets/image/开机.jpeg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  height: 100vh;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  flex-direction: column;
}

.circle-container {
  position: relative;
  width: 250px; /* 增加容器的大小 */
  height: 250px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.circle {
  position: absolute;

  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid #db3445;
  animation: expand 2s ease-out infinite;
}

.circle-1 {
  border-color: #1a8525; 
  border-width: 10px;
}

.circle-2 {
  border-color: #3ca546;
  border-width: 8px;
}

.circle-3 {
  border-color: #5dbd67; 
  border-width: 6px;
}

.circle-4 {
  border-color: #62d86e; 
  border-width: 4px;
}

.circle-5 {
  border-color: #9ae99f; 
  border-width: 2px;
}

.center-text {
  position: absolute;
  font-size: 40px;
  font-weight: bold;
  color: #ffffff;
  z-index: 10;
}

@keyframes expand {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  50% {
    transform: scale(1.3); /* 增大放大的比例 */
    opacity: 0.6;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
</style>
